{% extends 'myhome/index.html'%}

{% block tit %}
<title>地址管理</title>
{% endblock %}

{% block css %}
<link href="/static/myhome/css/personal.css" rel="stylesheet" type="text/css">
<link href="/static/myhome/css/infstyle.css" rel="stylesheet" type="text/css">
{% endblock %}

        

{% block js %}

<!--  -->
{% endblock %}




{% block con %}
<div class="center">
    <div class="col-main">
        <!-- 中间内容 -->
        <div class="main-wrap">

            <div class="user-info">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人资料</strong> / <small>Personal&nbsp;information</small></div>
                </div>
                <hr/>

               
                

                <!--个人信息 -->
                    <form action="{% url 'myhome_myinfo_introduction' %}" class="am-form am-form-horizontal" method="POST" enctype="multipart/form-data">
                       {% csrf_token %}
                        <div class="clear"></div>
                        <div class="info-main">

                              <!--头像 -->
                        <div class="user-infoPic">

                            <div class="filePic">
                                <input type="file" class="inputPic" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">
                                <img class="am-circle am-img-thumbnail" src="{{ data.pic_url }}" alt="" />
                            </div>

                            <p class="am-form-help">头像</p>

                            <div class="info-m">
                                <div><b>用户名：<i>{{ data.username }}</i></b></div>
                                <div class="u-level">
                                    <span class="rank r2">
                                         <s class="vip1"></s><a class="classes" href="#">铜牌会员</a>
                                    </span>
                                </div>
                                <div class="u-safety">
                                    <a href="safety.html">
                                     账户安全
                                    <span class="u-profile"><i class="bc_ee0000" style="width: 60px;" width="0">60分</i></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                            <div class="am-form-group">
                                <label for="user-name2" class="am-form-label">用户名</label>
                                <div class="am-form-content">
                                    <input type="text" id="user-name2" value="{{ data.username }}" name="username" placeholder="nickname">
                                    <span id="use_msg"></span>
                                </div>
                            </div>

                            

                            <div class="am-form-group">
                                <label class="am-form-label">性别</label>
                                <div class="am-form-content sex">
                                    <label class="am-radio-inline">
                                        <input type="radio" name="sex" {% if data.sex == '0' %} checked {% endif %} value="0"> 女
                                    </label>
                                    <label class="am-radio-inline">
                                        <input type="radio" name="sex" {% if data.sex == '1' %} checked {% endif %} value="1"> 男
                                    </label>
                                   
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="user-birth" class="am-form-label">年龄</label>
                                    <div class="am-form-content">
                                        <input type="Number" name="age" id="user-name2" value="{{ data.age }}" placeholder="nickname">

                                    
                                    </div>
                        
                            </div>
                            <div class="am-form-group">
                                <label for="user-phone" class="am-form-label">电话</label>
                                <div class="am-form-content">
                                    <input id="user-phone" name="phone" value="{{ data.phone }}" placeholder="telephonenumber" type="tel">
                                    <span id="phone_msg"></span>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label for="user-email" class="am-form-label">电子邮件</label>
                                <div class="am-form-content">
                                    <input id="user-email" placeholder="Email" name="email" value="{{ data.email }}" type="email">

                                </div>
                            </div>
                            
                            <div class="am-form-group safety">
                                <label for="user-safety" class="am-form-label">账号安全</label>
                                <div class="am-form-content safety">
                                    <a href="safety.html">

                                        <span class="am-icon-angle-right"></span>

                                    </a>

                                </div>
                            </div>

                            <div class="info-btn">
                                <div >
                                <button class="am-btn am-btn-danger">保存修改</button>
                                </div>
                            </div>

                        </div>
                    </form>

            </div>
        </div>
    </div>

        <aside class="menu">
        <ul>
            <li class="person">
                <a href="#">个人中心</a></li>
            <li class="person">
                <a href="{% url 'myhome_myinfo_introduction' %}">个人资料</a>
                <ul>
                    <li>
                        <a href="{% url 'myhome_myinfo_introduction' %}">个人信息</a></li>
                 <!--    <li>
                        <a href="safety.html">安全设置</a></li>
                    <li class="active"> -->
                        <a href="{% url 'myhome_myinfo_address' %}">收货地址</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="{% url 'myhome_myinfo_order' %}">我的交易</a>
                <ul>
                    <li>
                        <a href="{% url 'myhome_myinfo_order' %}">订单管理</a></li>
                   <!--  <li> 
                        <a href="change.html">退款售后</a></li> -->
                </ul>
            </li>
           <!--  <li class="person">
                <a href="#">我的资产</a>
                <ul>
                    <li>
                        <a href="coupon.html">优惠券</a></li>
                    <li>
                        <a href="bonus.html">红包</a></li>
                    <li>
                        <a href="bill.html">账单明细</a></li>
                </ul>
            </li> -->
            <!-- <li class="person">
                <a href="#">我的小窝</a>
                <ul>
                    <li>
                        <a href="collection.html">收藏</a></li>
                    <li>
                        <a href="foot.html">足迹</a></li>
                    <li>
                        <a href="comment.html">评价</a></li>
                    <li>
                        <a href="news.html">消息</a></li>
                </ul>
            </li> -->
        </ul>
    </aside>

</div>
<script type="text/javascript">
    // 收货人的正则验证
   $('#user-name2').change(function(){
        var a = $(this).val()
        
        var titname = document.getElementById('use_msg');
        // 判断匹配结果是否正确
        if(a != ''){
            titname.innerHTML="正确";
            titname.style.color="green";
            $('.am-btn').prop("disabled", false);
        }else{
            titname.innerHTML="用户名不正确";
            titname.style.color="red";
            $('.am-btn').prop("disabled", true);
        }
    })

    // 手机号码验证
    $('#user-phone').change(function(){
        var a = $(this).val()
        var reg = /^1[3|5|7|8|9|4][0-9]{9}$/;
        var titphone = document.getElementById('phone_msg');
        // 判断匹配结果是否正确
        if(reg.test(a)){
            titphone.innerHTML="正确";
            titphone.style.color="green";
            $('.am-btn').prop("disabled", false);
        }else{
            titphone.innerHTML="手机号码不正确";
            titphone.style.color="red";
            $('.am-btn').prop("disabled", true);

        }
    })

</script>
{% endblock %}